<template>
  <view>
    <view class="formAll">
      <view class="allItem">
        <view :style="{ width: `${labelWidth}px` }">{{ tips }}</view>
        <view class="w-[80%] border-b" :class="{ showScanIcon: showScan }">
          <wd-input
            v-model="chooseItem.label"
            v-if="!chooseItem.label"
            :placeholder="`请选择${tips}`"
            suffix-icon="arrow-right"
            @click="showPop = true"
            readonly
          />
          <wd-input
            v-else
            v-model="chooseItem.label"
            :placeholder="`请选择${tips}`"
            suffix-icon="close-outline"
            @clicksuffixicon="clicksuffixicon"
            disabled
          />
          <!-- <wd-select-picker
              v-model="searchForm.basePartId"
              :columns="partList"
              placeholder="请选择备件编号"
              type="radio"
              clearable
              filterable
            ></wd-select-picker> -->
        </view>
      </view>
    </view>
    <wd-popup
      :z-index="100000"
      v-model="showPop"
      position="bottom"
      custom-style="border-radius:32rpx;"
    >
      <view class="h-[70vh] bg-[white] py-[20px] px-[15px]">
        <view class="titleBox">
          <view></view>
          <view>请选择</view>
          <view @click="(showPop = false), (partListNow = partList), (searchPop = '')">
            <wd-icon name="close" size="14px"></wd-icon>
          </view>
        </view>
        <view>
          <wd-search
            @change="changeSearch"
            @clear="partListNow = partList"
            v-model="searchPop"
            placeholder-left
            hide-cancel
          />
        </view>
        <view class="popContent">
          <view
            @click="() => chooseData(item)"
            class="item"
            v-for="item in partListNow"
            :key="item.value"
          >
            {{ item.label }}
          </view>
        </view>
        <!-- <wd-button custom-class="customBtn" size="large">主要按钮</wd-button> -->
      </view>
    </wd-popup>
  </view>
</template>

<script lang="js" setup>
const showPop = ref(false)
const partList = ref([])
const partListNow = ref([])
const searchPop = ref('')
const chooseItem = ref({
  value: '',
  label: '',
})

const props = defineProps({
  dataList: {
    type: Array,
    default: [],
  },
  showScan: {
    type: Boolean,
    default: false,
  },
  tips: {
    type: String,
    default: '',
  },
  labelWidth: {
    type: Number,
    default: 80,
  },
})

watch(
  () => props.dataList,
  (newValue) => {
    // console.log('newValue', newValue)
    partList.value = newValue
    partListNow.value = partList.value
  },
  {
    immediate: true,
  },
)

const clicksuffixicon = () => {
  chooseItem.value = {
    value: '',
    label: '',
  }
  searchPop.value = ''
  partListNow.value = partList.value
}

const changeSearch = () => {
  partListNow.value = partList.value.filter((item) => {
    return item.label.includes(searchPop.value)
  })
}

const chooseData = (item) => {
  chooseItem.value = item
  searchPop.value = ''
  partListNow.value = partList.value
  showPop.value = false
}

const changeChiose = (item) => {
  chooseItem.value = item
}

defineExpose({
  chooseItem,
  changeChiose,
})
</script>

<style lang="scss" scoped>
:deep() {
  .customBtn {
    width: 100%;
    margin-top: 40upx;
  }
  .wd-input__inner {
    color: #474747 !important;
  }
  .is-disabled {
    color: #474747 !important;
  }
  .showScanIcon {
    .wd-input__body {
      padding-left: 30px !important;
    }
  }
}
.formAll {
  .allItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .border-b {
      border-bottom: 1px solid #e5e5e5;
    }
  }
}
.titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.popContent {
  height: 72%;
  overflow-y: scroll;
  .item {
    line-height: 40px;
    padding: 0px 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
